<!-- original sqlite tab content (commented out) -->
<div class="row">
    <!-- 左侧数据库和表菜单 -->
    <div class="col-md-3">
        <div class="card shadow-sm h-100">
            <div class="card-header bg-info text-white">
                <h2 class="h5 mb-0">
                    <i class="fa fa-database mr-2"></i>数据库浏览
                </h2>
            </div>
            <div class="card-body overflow-auto" style="height: calc(100vh - 180px);">
                <div id="database-tree">
                    <!-- 数据库内容将通过JavaScript动态加载 -->
                    <div class="text-center text-muted p-3">
                        <i class="fa fa-spinner fa-spin"></i> 加载数据库列表中...
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 右侧表数据显示 -->
    <div class="col-md-9">
        <div class="card shadow-sm">
            <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
                <h2 class="h5 mb-0" id="table-title">
                    <i class="fa fa-table mr-2"></i>选择一个表查看数据
                </h2>
                <div id="table-info" class="text-sm">
                    共 <span id="total-records">0</span> 条记录
                </div>
            </div>
            <div class="card-body">
                <!-- 操作工具栏：表与列管理、数据操作 -->
                <div id="sqlite-actions" class="mb-3 d-flex flex-wrap gap-2">
                    <div class="btn-group btn-group-sm" role="group" aria-label="表管理">
                        <button class="btn btn-primary" id="btn-create-table"><i class="fa fa-plus"></i> 新增表</button>
                        <button class="btn btn-danger" id="btn-drop-table"><i class="fa fa-trash"></i> 删除表</button>
                        <button class="btn btn-warning" id="btn-rename-table"><i class="fa fa-pencil"></i> 重命名表</button>
                    </div>
                    <div class="btn-group btn-group-sm ms-2" role="group" aria-label="列管理">
                        <button class="btn btn-secondary" id="btn-rename-column"><i class="fa fa-pencil"></i>
                            列名重命名</button>
                        <button class="btn btn-success" id="btn-add-column"><i class="fa fa-plus"></i> 新增列</button>
                        <button class="btn btn-outline-danger" id="btn-drop-column"><i class="fa fa-minus"></i>
                            删除列</button>
                    </div>
                    <div class="btn-group btn-group-sm ms-2" role="group" aria-label="数据操作">
                        <button class="btn btn-outline-primary" id="btn-insert-row"><i class="fa fa-plus-square"></i>
                            新增数据</button>
                        <button class="btn btn-outline-warning" id="btn-update-row"><i class="fa fa-edit"></i>
                            修改数据</button>
                        <button class="btn btn-outline-danger" id="btn-batch-delete"><i class="fa fa-trash-o"></i>
                            批量删除</button>
                    </div>
                </div>
                <div id="table-container" class="overflow-auto" style="max-height: 500px;">
                    <!-- 表格内容将动态加载 -->
                    <div class="text-center py-8 text-muted">
                        <i class="fa fa-database fa-4x mb-3"></i>
                        <p>请从左侧选择一个数据库和表来查看数据</p>
                    </div>
                </div>

                <!-- 分页控件 -->
                <div id="pagination-container" class="mt-4 d-none">
                    <nav aria-label="分页">
                        <ul class="pagination justify-content-center">
                            <li class="page-item" id="prev-page">
                                <button class="page-link" href="#" aria-label="上一页">
                                    <span aria-hidden="true">&laquo;</span>
                                </button>
                            </li>
                            <div id="page-numbers"></div>
                            <li class="page-item" id="next-page">
                                <button class="page-link" href="#" aria-label="下一页">
                                    <span aria-hidden="true">&raquo;</span>
                                </button>
                            </li>
                        </ul>
                    </nav>
                    <div class="text-center mt-2">
                        <span class="text-sm text-muted">显示第 <span id="start-record">0</span>-<span
                                id="end-record">0</span> 条，共 <span id="pagination-total">0</span> 条</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- SQL查询控制台 -->
        <div class="card shadow-sm mt-3">
            <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
                <h2 class="h6 mb-0"><i class="fa fa-terminal me-2"></i>SQL 查询控制台</h2>
                <small class="text-opacity-75">当前数据库：<span id="sql-current-db">(未选择)</span></small>
            </div>
            <div class="card-body">
                <div class="mb-2">
                    <textarea id="sql-console-input" class="form-control" rows="4"
                        placeholder="例如：SELECT * FROM table LIMIT 10"></textarea>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <div class="form-text">仅执行当前数据库中的SQL；SELECT显示结果，其他语句返回影响行数。</div>
                    <button class="btn btn-sm btn-primary" id="sql-run-btn"><i class="fa fa-play"></i> 运行SQL</button>
                </div>
                <div id="sql-console-results" class="mt-3" style="max-height: 260px; overflow:auto;"></div>
            </div>
        </div>
    </div>
</div>
<!-- end original sqlite tab content -->